<template>
  <div class="knowledge-container">
    <div class="page-header">
      <h1>知识学习</h1>
      <p class="subtitle">持续学习新知识，构建完整的知识体系</p>
    </div>

    <div class="content-section">
      <div class="intro-text">
        <p>在快速变化的时代，持续学习是保持竞争力和实现个人成长的关键。有效的学习不仅能提升专业技能，还能丰富人生阅历。</p>
      </div>

      <div class="learning-strategies">
        <h2>高效学习策略</h2>
        <div class="strategies-grid">
          <div class="strategy-card">
            <h3>主动学习</h3>
            <p>通过提问、讨论和实践来加深理解，而非被动接受信息。</p>
            <ul>
              <li>在学习过程中提出问题</li>
              <li>与他人讨论学习内容</li>
              <li>将知识应用于实际情境</li>
            </ul>
          </div>

          <div class="strategy-card">
            <h3>间隔重复</h3>
            <p>通过在不同时间间隔复习知识，巩固长期记忆。</p>
            <ul>
              <li>使用记忆卡片系统</li>
              <li>定期回顾已学内容</li>
              <li>逐步延长复习间隔</li>
            </ul>
          </div>

          <div class="strategy-card">
            <h3>费曼技巧</h3>
            <p>通过向他人解释知识来检验自己的理解程度。</p>
            <ul>
              <li>用简单语言解释复杂概念</li>
              <li>识别理解中的漏洞</li>
              <li>简化和类比说明</li>
            </ul>
          </div>

          <div class="strategy-card">
            <h3>多模态学习</h3>
            <p>结合视觉、听觉、动手实践等多种方式学习。</p>
            <ul>
              <li>观看教学视频</li>
              <li>阅读相关书籍</li>
              <li>动手实践操作</li>
              <li>参与讨论交流</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="knowledge-areas">
        <h2>知识领域推荐</h2>
        <div class="areas-grid">
          <div class="area-card">
            <h3>人文社科</h3>
            <p>提升人文素养，理解社会运行规律</p>
            <ul>
              <li>心理学：了解人类行为和思维</li>
              <li>历史学：以史为鉴，洞察未来</li>
              <li>哲学：培养批判性思维</li>
              <li>经济学：理解资源配置原理</li>
            </ul>
          </div>

          <div class="area-card">
            <h3>科学技术</h3>
            <p>掌握现代科技，适应数字化时代</p>
            <ul>
              <li>计算机科学：编程和算法思维</li>
              <li>数据科学：从数据中提取价值</li>
              <li>人工智能：了解技术发展趋势</li>
              <li>生物科学：探索生命奥秘</li>
            </ul>
          </div>

          <div class="area-card">
            <h3>艺术修养</h3>
            <p>培养审美能力，丰富精神世界</p>
            <ul>
              <li>文学：提升语言表达和想象力</li>
              <li>音乐：陶冶情操，放松身心</li>
              <li>绘画：培养观察力和创造力</li>
              <li>电影：理解视觉叙事艺术</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="learning-resources">
        <h2>学习资源推荐</h2>
        <div class="resources-grid">
          <div class="resource-card">
            <h4>在线学习平台</h4>
            <ul>
              <li>Coursera：世界顶级大学课程</li>
              <li>edX：高质量在线教育</li>
              <li>学堂在线：国内优质课程</li>
              <li>网易云课堂：职业技能提升</li>
            </ul>
          </div>

          <div class="resource-card">
            <h4>书籍推荐</h4>
            <ul>
              <li>《如何阅读一本书》：提升阅读效率</li>
              <li>《终身成长》：培养成长型思维</li>
              <li>《刻意练习》：掌握技能提升方法</li>
              <li>《原则》：建立决策原则体系</li>
            </ul>
          </div>

          <div class="resource-card">
            <h4>学习工具</h4>
            <ul>
              <li>Anki：间隔重复记忆工具</li>
              <li>Notion：知识管理平台</li>
              <li>Forest：专注力提升应用</li>
              <li>Kindle：电子书阅读器</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="recommended-books">
        <h2>学习推荐书籍</h2>
        <p class="books-intro">以下是关于学习方法、知识体系构建和个人成长的经典书籍，每一本书都能帮助你提升学习效率，构建完整的知识体系。</p>
        
        <div class="books-grid">
          <div class="book-card">
            <h4>《如何阅读一本书》</h4>
            <p>莫提默·J·艾德勒</p>
          </div>
          <div class="book-card">
            <h4>《终身成长》</h4>
            <p>卡罗尔·德韦克</p>
          </div>
          <div class="book-card">
            <h4>《刻意练习》</h4>
            <p>安德斯·艾利克森</p>
          </div>
          <div class="book-card">
            <h4>《学习之道》</h4>
            <p>芭芭拉·奥克利</p>
          </div>
          <div class="book-card">
            <h4>《知识大迁移》</h4>
            <p>威廉·庞德斯通</p>
          </div>
          <div class="book-card">
            <h4>《思考，快与慢》</h4>
            <p>丹尼尔·卡尼曼</p>
          </div>
          <div class="book-card">
            <h4>《原则》</h4>
            <p>雷·达里奥</p>
          </div>
          <div class="book-card">
            <h4>《穷查理宝典》</h4>
            <p>查理·芒格</p>
          </div>
          <div class="book-card">
            <h4>《认知心理学》</h4>
            <p>罗伯特·索尔索</p>
          </div>
          <div class="book-card">
            <h4>《元认知》</h4>
            <p>大卫·迪绍夫</p>
          </div>
          <div class="book-card">
            <h4>《直觉泵和其他思考工具》</h4>
            <p>丹尼尔·丹尼特</p>
          </div>
          <div class="book-card">
            <h4>《思维模型》</h4>
            <p>彼得·霍林斯</p>
          </div>
          <div class="book-card">
            <h4>《超级学习者》</h4>
            <p>斯科特·扬</p>
          </div>
          <div class="book-card">
            <h4>《费曼学习法》</h4>
            <p>理查德·费曼</p>
          </div>
          <div class="book-card">
            <h4>《如何高效学习》</h4>
            <p>斯科特·扬</p>
          </div>
          <div class="book-card">
            <h4>《深度工作》</h4>
            <p>卡尔·纽波特</p>
          </div>
          <div class="book-card">
            <h4>《专注力》</h4>
            <p>丹尼尔·戈尔曼</p>
          </div>
          <div class="book-card">
            <h4>《创意自信》</h4>
            <p>汤姆·凯利</p>
          </div>
          <div class="book-card">
            <h4>《思考的艺术》</h4>
            <p>罗伯特·格林</p>
          </div>
          <div class="book-card">
            <h4>《超越感觉》</h4>
            <p>文森特·鲁杰罗</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.knowledge-container {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-header h1 {
  font-size: 2.5rem;
  color: var(--vt-c-indigo);
  margin-bottom: 1rem;
}

.subtitle {
  font-size: 1.2rem;
  color: var(--color-text);
  opacity: 0.8;
}

.intro-text {
  background-color: var(--color-background-soft);
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 3rem;
  text-align: center;
}

.intro-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}

.learning-strategies h2,
.knowledge-areas h2,
.learning-resources h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.strategies-grid,
.areas-grid,
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.strategy-card,
.area-card,
.resource-card {
  background-color: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.strategy-card h3,
.area-card h3,
.resource-card h4 {
  color: var(--vt-c-indigo);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.strategy-card p,
.area-card p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.strategy-card ul,
.area-card ul,
.resource-card ul {
  padding-left: 1.5rem;
}

.strategy-card li,
.area-card li,
.resource-card li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.resource-card h4 {
  font-size: 1.3rem;
}

@media (max-width: 768px) {
  .knowledge-container {
    padding: 1rem;
  }
  
  .page-header h1 {
    font-size: 2rem;
  }
  
  .strategies-grid,
  .areas-grid,
  .resources-grid,
  .books-grid {
    grid-template-columns: 1fr;
  }
}

/* 书籍推荐部分样式 */
.recommended-books {
  margin-top: 4rem;
}

.recommended-books h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: var(--vt-c-indigo);
}

.books-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.book-card {
  background-color: white;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.book-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.book-card h4 {
  color: var(--vt-c-indigo);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.book-card p {
  color: var(--color-text);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* 响应式调整 */
@media (min-width: 768px) and (max-width: 1024px) {
  .books-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}
</style>